<template>
  <div class="content" v-show="state">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="float:left">图层</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="zdClick">退出</el-button>
      </div>
      <el-tree
          :data="modelArray"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
          :props="defaultProps"
          :default-expand-all="true"
          @getCheckedNodes="getCheckedNodes"
          @check-change="checkchange">
      </el-tree>
    </el-card>
  </div>
</template>

<script>
import {getLayerList} from "@/api/login";

export default {
  name: "leftMenu",
  data() {
    return {
      modelArray: null,
      state:false,
      defaultProps: {
        children: 'nodes',
        label: 'text'
      },
      parmas:{
        pageNum:1,
        pageSize:100
      }
    };
  },
  mounted() {
    this.modelArray = [
      {
        type:'point',
        text:'三山五园POI点图层',
        nodes:[]
      },
      {
        type:'line',
        text:'三山五园线图层',
        nodes:[]
      },
      {
        type:'face',
        text:'三山五园面图层',
        nodes:[]
      }
    ]
    getLayerList(this.parmas).then((res)=>{
      console.log("图层",res)
      res.rows.forEach((ite)=>{
        if(ite.type == 'point'){
          this.modelArray[0].nodes.push(ite)
        }else if(ite.type == 'line'){
          this.modelArray[1].nodes.push(ite)
        }else{
          this.modelArray[2].nodes.push(ite)
        }
      })
    })

  },
  computed: {
  },
  methods: {
    //选中的节点所组成的数组
    getCheckedNodes() {

    },
    zdClick(){
      this.state = false;
      this.$emit('quit3D')
    },
    //节点选中状态发生变化时的回调
    checkchange(node, bool, tree) {
      let self = this;
      if (bool) {
        //勾选
        this.$emit('addNode',node)
      } else {
        //取消
        this.$emit('removeNode',node)
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 261px;
  padding: 15px;
  //background-color: #0516329c;
  background-color: #ffffff;
  .title {
    text-align: left;
    //color: gold;
    color: black;
    padding: 18px 0px;
  }
}

.el-tree {
  background-color: rgba(0, 0, 0, 0);
  //color: #c6e7ff;
  color: black;
  width: 256px;
}

::v-deep .el-tree-node__label {
  font-size: 15px;
}

::v-deep .el-tree-node__content {
  padding: 10px 15px;
  //border: 1px solid #1563b2;
  //border: 1px solid black;
}

::v-deep .el-tree-node__content {
  &:hover {
    background-color: rgba(0, 0, 0, 0.42);
  }
}

::v-deep .el-tree-node:focus {
  .el-tree-node__content {
    //background-color: #5daaf0;   //背景色
    background-color: rgba(0, 0, 0, 0);
  }
}
</style>
